<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/detail.css">
  <style>
    .num {
      width: 73px;
      height: 73px;
      font-size: 16px;
      text-align: center;
      display: block;
      margin: 50px 0 0 0;
      font-size: 20px;
      color: #000;
    }

    .jian {
      position: absolute;
      top: 0;
      left: 82px;
    }

    .jia {
      position: absolute;
      top: 38px;
      left: 82px;
    }
  </style>
</head>

<body>
  <h1>我是一个商品详情页面</h1>

  <div class="container"></div>

  <script src="./js/tools.js"></script>
  <script src="./js/myAjax.js"></script>

  <script>
    // 获取标签对象
    const oDivContainer = document.querySelector('.container');
    // 定义全局变量 存储 数据
    let res;

    // 触发函数动态渲染生成页面
    setPage();

    // 通过事件委托语法 给 标签 添加点击事件
    oDivContainer.addEventListener('click', event => {
      // 获取 购买数量标签对象
      const oIptNum = oDivContainer.querySelector('.num');

      //  触发事件的标签event.target 如果 name 是 '-' 点击的是 减 按钮 
      if (event.target.getAttribute('name') === '-') {
        // 设定 购买数量input标签的数值 是 这个标签当前value值 - 1  
        // 获取的数据是字符串类型 需要转化为 数值类型
        // 最小值是 1 

        // 极值方法
        oIptNum.value = Number(oIptNum.value) - 1 < 1 ? 1 : Number(oIptNum.value) - 1;


        //  触发事件的标签event.target 如果 name 是 '+' 点击的是 加 按钮
      } else if (event.target.getAttribute('name') === '+') {
        // 设定 购买数量input标签的数值 是 这个标签当前value值 + 1 
        // 获取的数据是字符串类型 需要转化为 数值类型

        // 最大值是 库存 res.info.goods_number  

        // 极值方法
        oIptNum.value = Number(oIptNum.value) + 1 > res.info.goods_number ? res.info.goods_number : Number(oIptNum.value) + 1;

        //  触发事件的标签event.target 如果 name 是 'inCart' 点击的是 加入购物车 按钮
      } else if (event.target.getAttribute('name') === 'inCart') {
        // 判断 有没有登录 

        // 调用登录信息 结果是 undefined
        if (window.localStorage.token === undefined) {
          // 弹出确认框 点击确定 跳转 登录页面
          if (window.confirm('您还没有登录 点击 确定 跳转 登录页')) window.location.href = './login.html';
        } else {
          // 已经登录 

          // 存储 当前商品的数据信息
          const commObj = res.info;

          // 将商品信息添加到购物车数据库中

          // 判断 有没有购物车 
          if (window.localStorage.cart === undefined) {
            // 没有 创建购物车 
            // 新增商品信息 以 数组方式存储

            // 对于 购买数量 要进行验证 

            // 获取购买数量数据 转化为 数值类型
            let num = Number(oIptNum.value);

            // 输入的购买数量 必须是 1 至 库存 
            // 如果 购买数量范围 不是 1 至 库存 报错
            if (!(num >= 1 && num <= commObj.goods_number)) {
              // 弹出提示信息 
              window.alert(`您的购买数量必须是 1 至 ${commObj.goods_number}`);

              // 给 购买数量input标签 赋值 正确数值
              oIptNum.value = 1;

              // return终止之后的操作
              return;

            }

            // 给这个对象 新增 购买数量单元
            // 购买的数量 是 input标签中的数据 
            commObj.number = num;

            // 给这个对象 新增 购买状态单元
            // 默认购买状态是 true 也就是 购买
            commObj.buy = true;

            // 将 新增单元后的 商品对象 存储在数组中 转化为 json字符串 
            // 最终 存储到 localStorage 中 cart 购物车数据中
            window.localStorage.cart = JSON.stringify([commObj]);


          } else {
            // 有购物车 

            // 获取购物车数据
            const cart = JSON.parse(window.localStorage.cart);

            // 判断是不是空车
            if (cart.length === 0) {
              // 购物车是 空车
              // 新增商品信息 以 数组方式存储

              // 对于 购买数量 要进行验证 

              // 获取购买数量数据 转化为 数值类型
              let num = Number(oIptNum.value);

              // 输入的购买数量 必须是 1 至 库存 
              // 如果 购买数量范围 不是 1 至 库存 报错
              if (!(num >= 1 && num <= commObj.goods_number)) {
                // 弹出提示信息 
                window.alert(`您的购买数量必须是 1 至 ${commObj.goods_number}`);

                // 给 购买数量input标签 赋值 正确数值
                oIptNum.value = 1;

                // return终止之后的操作
                return;

              }

              // 给这个对象 新增 购买数量单元
              // 购买的数量 是 input标签中的数据 
              commObj.number = num;

              // 给这个对象 新增 购买状态单元
              // 默认购买状态是 true 也就是 购买
              commObj.buy = true;

              // 将 新增单元后的 商品对象 存储在数组中 转化为 json字符串 
              // 最终 存储到 localStorage 中 cart 购物车数据中
              window.localStorage.cart = JSON.stringify([commObj]);

            } else {
              // 购物车 不是 空车

              // 判断 购物车中 没有没 当前添加商品

              // 数组.some() 
              //    判断数组中有没有符合调价的数据 只要有一个返回值就是true
              //    有 goods_id 相同的 返回结果是 true 
              //    没有 goods_id 相同的 返回结果是 false 

              // 数组.find() 
              //    判断数组中有没有符合调价的数据 返回对应的数据数值
              //    有 goods_id 相同的 返回结果是 商品的数据信息
              //    没有 goods_id 相同的 返回结果是 undefined 

              let bool = cart.some(function (item) {
                // item     是 购物车中的商品信息
                // commObj  是 当前要添加的商品信息
                // 如果 item的goods_id 和 commObj的goods>id 相同
                // 证明 购物车中 有 当前要添加的商品
                return item.goods_id === commObj.goods_id;
              })

              console.log(bool);

              if (bool) {
                // 购物车中 有当前要添加的商品
                // 在 购物车数组中 给 已经存在的商品 累加 购买数量

                // 获取 购买数量input标签中输入的购买数量
                let num = Number(oIptNum.value);

                // 找到 goods_id 相同的 索引下标
                let index = cart.findIndex(function (item) {
                  return item.goods_id === commObj.goods_id;
                })

                // 验证 原始购买数量 + 新增购买数量 必须要在 1 至 库存之前

                if (!(cart[index].number + num >= 1 && cart[index].number + num <= commObj.goods_number)) {
                  // 弹出提示信息
                  window.alert(`您已经购买 ${cart[index].number}件商品 库存是${commObj.goods_number}件商品 您最多再买${commObj.goods_number - cart[index].number}`);

                  // 给 购买数量input标签赋值 正确的数值
                  // 可以赋值 库存 - 已经购买的数量
                  oIptNum.value = commObj.goods_number - cart[index].number;


                  // 终止之后的操作
                  return;

                }



                // 修改 索引下标对应的数组中对象存储的购买数量
                // 新的购买数量 是 原始购买数量 + 输入框的购买数量
                cart[index].number = cart[index].number + num;

                console.log(cart);

                // 将 新的数组数据 写入 localStorage 中
                window.localStorage.cart = JSON.stringify(cart);


              } else {
                // 购物车中没有当前要添加的商品

                // 获取 购买数量 
                let num = Number(oIptNum.value);

                // num的数值范围 不是 1 至 库存
                if (!(num >= 1 && num <= commObj.goods_number)) {
                  // 弹出提示信息
                  window.alert(`您的购买数量 必须是 1 至 ${commObj.goods_number}`);

                  // 给 购买数量标签 赋值正确的数值
                  oIptNum.value = 1;

                  // 终止之后程序的操作
                  return;
                }

                // 给 当前商品数据对象 新增 购买数量属性
                commObj.number = num;

                // 给 当前商量数据对象 新增 购买状态属性
                commObj.buy = true;

                // 将对象新增到数组起始位置
                cart.unshift(commObj);

                // 将 新的数组 定义给 localStorage 
                window.localStorage.cart = JSON.stringify(cart);

              }
            }
          }

          // 跳转 购物车页面
          window.location.href = './cart.html';
        }
      }
    })


    // 定义函数 发送请求 动态渲染生成页面
    async function setPage() {
      // 获取 浏览器地址栏数据
      let { id } = myGetUrlValObj();
     

      // 根据 id值 发送请求
      // 给全局变量赋值
      res = JSON.parse(await myPromise({
        url: 'http://localhost:8888/goods/item',
        type: 'get',
        data: { id: id },
      }))

 

      // 根据返回的数据 动态生成页面内容
      oDivContainer.innerHTML = `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">商品详细信息</h3>
        </div>
        <div class="panel-body">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="${res.info.img_big_logo}" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">${res.info.title}</h4>

              <p>
                <i class="glyphicon glyphicon-yen"></i>
                <span>${res.info.current_price}</span><br>
                <del style="color:gray;font-size:20px">原价 ${res.info.price}</del>
              </p>
              <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">XL</button>
                <button type="button" class="btn btn-default">L</button>
                <button type="button" class="btn btn-default">M</button>
                <button type="button" class="btn btn-default">S</button>
                <button type="button" class="btn btn-default">XS</button>
              </div>
              <p style="position:relative">
                <input value="1" class="num">
                <button name="-" type="button" class="jian btn btn-default">-</button>
                <button name="+"  type="button" class="jia btn btn-default">+</button>
              </p>
              <p>
                <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                <a href="JavaScript:;" name="inCart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
              </p>
            </div>
          </div>
          <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
            <li role="presentation"><a href="#">商品参数信息</a></li>
            <li role="presentation"><a href="#">相关商品</a></li>
          </ul>
          <div>
            ${res.info.goods_introduce}
          </div>
        </div>
      </div>
    
    `;

    }


  </script>

</body>

</html>
<!-- 
    <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">商品详细信息</h3>
    </div>
    <div class="panel-body">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2898933862/O1CN01ExuNHp1eOq9TKoRh6_!!2898933862.jpg_580x580Q90.jpg_.webp" alt="...">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</h4>
          <p>
            <i class="glyphicon glyphicon-yen"></i>
            <span>1234.56</span>
          </p>
          <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">XL</button>
            <button type="button" class="btn btn-default">L</button>
            <button type="button" class="btn btn-default">M</button>
            <button type="button" class="btn btn-default">S</button>
            <button type="button" class="btn btn-default">XS</button>
          </div>
          <p style="position:relative">
            <input value="1" class="num">
            <button type="button" class="jian btn btn-default">-</button>
            <button type="button" class="jia btn btn-default">+</button>
          </p>
          <p>
            <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
            <a href="./cart.html" class="btn btn-danger btn-lg" role="button">加入购物车</a>
          </p>
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
        <li role="presentation"><a href="#">商品参数信息</a></li>
        <li role="presentation"><a href="#">相关商品</a></li>
      </ul>
      <div>
          <img src="https://img.alicdn.com/imgextra/i3/2898933862/O1CN01DJkGqE1eOq9PbzZd4_!!2898933862.jpg" alt="">
      </div>
    </div>
  </div>
 -->